<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="../static/element_ui/index.css"><!--rel="stylesheet"很重要，不加，css不会加载-->
</head>
<body>
    <div id="app" style="width:800px;margin: 200px auto;">
        <el-row style="width:600px;margin: auto">
            <el-col :span="8" style="width: 100%">
                <el-form ref="form">
                    <el-form-item label="用户名" label-width="120px">
                        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" label-width="120px">
                        <el-input type="password" v-model="form.password"  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="text-align: center">
                            <el-button type="success" @click="login">登陆</el-button><el-button type="info" @click="reset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>

</body>
<script src="../static/vue/vue.js"></script>
<script src="../static/element_ui/index.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: ''
            },
        },
        methods: {
            login: function () {
                $.ajax({
                    url: '/user/login',
                    type: 'post',
                    data: {username : vm.form.username,password : vm.form.password},
                    dataType:'json',
                    success: (data) => {
                        console.log(data);
                        if(data.code === 00){
                            window.location.href='/index';
                        }else{
                            this.$message({
                                message: data.msg,
                                type: 'warning'
                            });
                        }
                    },
                    error: (data) => {
                        console.log(data);
                        this.$message({
                            message: data.msg,
                            type: 'warning'
                        });
                    }
                });
            },
            reset: function () {
                this.form.username = '';
                this.form.password = '';
            }
        }
    });
</script>
</html>
